<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="Keywords" content="网站关键词">
    <meta name="Description" content="网站介绍">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/reg.css">
</head>
<body>
<div id="app">
    <div id="ajax-hook"></div>
    <div class="wrap">
        <div class="wpn">
            <div class="form-data pos">
                <a href=""><img src="./img/logo.png" class="head-logo"></a>
                <div class="change-login">
                    <p class="account_number on">账号登录</p>
                    <p class="message">短信登录</p>
                </div>
                <div class="form1">
                    <p class="p-input pos">
                        <label for="num">手机号/用户名/UID/邮箱</label>
                        <input type="text" id="num" v-model="user.username">
                        <span class="tel-warn num-err hide"><em>账号或密码错误，请重新输入</em><i class="icon-warn"></i></span>
                    </p>
                    <p class="p-input pos">
                        <label for="pass">请输入密码</label>
                        <input type="password" style="display:none"/>
                        <input type="password" id="pass" autocomplete="new-password" v-model="user.password">
                        <span class="tel-warn pass-err hide"><em>账号或密码错误，请重新输入</em><i class="icon-warn"></i></span>
                    </p>
                    <p class="p-input pos code hide">
                        <label for="veri">请输入验证码</label>
                        <input type="text" id="veri">
                        <img src="">
                        <span class="tel-warn img-err hide"><em>账号或密码错误，请重新输入</em><i class="icon-warn"></i></span>
                        <!-- <a href="javascript:;">换一换</a> -->
                    </p>
                </div>
                <div class="form2 hide">
                    <p class="p-input pos">
                        <label for="num2">手机号</label>
                        <input type="number" id="num2">
                        <span class="tel-warn num2-err hide"><em>账号或密码错误</em><i class="icon-warn"></i></span>
                    </p>
                    <p class="p-input pos">
                        <label for="veri-code">输入验证码</label>
                        <input type="number" id="veri-code">
                        <a href="javascript:;" class="send">发送验证码</a>
                        <span class="time hide"><em>120</em>s</span>
                        <span class="tel-warn error hide">验证码错误</span>
                    </p>
                </div>
<!--                <div class="r-forget cl">-->
<!--                    <a href="register.html" class="z">账号注册</a>-->
<!--                    <a href="forgetPassword.html" class="y">忘记密码</a>-->
<!--                </div>-->
                <a href="javascript:;" @click="signIn" class="lang-btn off log-btn">登录</a>
                <div class="third-party">
                    <a href="#" class="log-qq icon-qq-round"></a>
                    <a href="#" class="log-qq icon-weixin"></a>
                    <a href="#" class="log-qq icon-sina1"></a>
                </div>
                <p class="right">Powered by © 2021</p>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery.js"></script>
<script src="js/agree.js"></script>
<!--<script src="js/login.js"></script>-->
<script src="js/axios.min.js"></script>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            user:{}
        },
        methods:{
            //用户登录
            signIn(){
                var that = this;
                axios.post("http://localhost:8081/kun/foreign/user/signIn",that.user).then(res=>{
                    var data = res.data
                    if(data.code == 200){
                        /**
                         * 传入数据
                         * 1. localStorage是本地存储，存储期限不限；
                         * 2. sessionStorage会话存储，页面关闭数据就会丢失。
                         * 两者其他用法基本一致
                         */
                        sessionStorage.setItem("user",JSON.stringify(data.data.user));//转换为JSON字符串
                        location.href = "blog/index.html";
                    }else {
                        alert(data.message);
                        location.href = "index.html";
                    }
                });
            }
        },
        create() {

        }
    })
</script>
</body>
</html>